.answer{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  .weui_mask_transition{
    display: block;
  }
  .answer-body{
    width: 80%;
    background: none;
    .start{
      .con{
        border-radius: 10rem/16;
        overflow: hidden;
        background-color: #fafafc;
        .head{
          height: 150rem/16;
          background-color: #b2cc5e;
          color:#fff;
          font-size: 1.2rem;
          .text{
            padding: 45rem/16 10rem/16 10rem/16 10rem/16;
          }
        }
        .main{
          height: 150rem/16;
          color: #738080;
          font-size: 1.2rem;
          .ans-a{
            &:before{
              content: 'A.';
              display: block;
            }
            &.right:after{
              left: 3rem;
            }
          }
          .ans-a,.ans-b{
            width: 9em;
            height:9rem;
            display: table-cell;
            vertical-align: middle;
            &.right{
              color: #ced2d2;
            }
            &.right:after{
              content:' ';
              display: inline-block;
              position: absolute;
              top:13rem;
              background-image: url(../../images/check_right_icon.svg);
              background-size: 40px 40px;
              width: 40px;
              height: 40px;
            }
          }
          .ans-b{
            &:before{
              content:'B.';
              display: block;
            }
            &.right:after{
              right: 2.5rem;
            }
          }
        }
        .process{
          width: 40rem/16;
          height: 40rem/16;
          position: absolute;
          text-align:center;
          transform: translate(-50%,-50%);
          background-color: #f5f5f5;
          left: 50%;
          border-radius: 20rem/16;
          line-height: 40rem/16;
          color: #9cb352;
          font-size: 25rem/16;
          .svg{
            width: 40rem/16;
            height: 40rem/16;
          }
          .text{
            position: absolute;
            top:0rem/16;
            left:13rem/16;
          }
        }
      }
      .btn{
        .item{
          width: 62rem/16;
          height: 62rem/16;
          background-size: 62rem/16 62rem/16;
          margin: 20rem/16;
          background-image: url('../../images/answer_btn_right_icon.png');
          line-height: 40rem/16;
          color: #fff;
          font-size: 25rem/16;
          &:first-child{
            float: left;
            &:after{
              content: 'A';
            }
          }
          &:last-child{
            float: right;
            &:after{
              content: 'B';
            }
          }
          &.on{
            background-image: url('../../images/answer_btn_wrong_icon.png');
            line-height: 60rem/16;
          }
        }
      }
      &:after{
        content:' ';
        display: inline-block;
        position: absolute;
        width: 81rem/43;
        height: 434rem/43;
        background-size: 81rem/43 434rem/43;
        background-image: url(../../images/answer_game_icon.png);
        top:8.5rem;
        left: 7.5rem;
      }
    }
    .weui_dialog_hd{
      padding:0;
      width: 852rem/50;
      height: 197rem/50;
      line-height: 2.5rem;
      background-size: 852rem/50 197rem/50;
      color:#fff;
      font-size: 1.2rem;
    }
    .weui_dialog_ft{
      a{
        margin: 10rem/16;
        border-radius: 2rem;
        background-color: #5cb8e6;
        color:#fff;
        font-size: 1rem;
      }
      &:after{
        border-top:none;
      }
    }
    .fail{
      .weui_dialog_hd{
        background-image:url(../../images/answer_faile_title_icon.png);
      }
      .weui_dialog_bd{
        padding:0;
        margin: 4rem auto 1rem auto;
        width: 414rem/50;
        height: 302rem/50;
        background-size: 414rem/50 302rem/50;
        background-image: url(../../images/answer_faile_body_icon.png);
      }
      .des{
        color: #fff;
        padding: 2px;
        background-color: #3e3e3e;
        border: #979797 solid 2px;
        border-radius: 3rem;
        margin-bottom: 3rem;
      }
    }
    .success{
      .weui_dialog_hd{
        background-image:url(../../images/answer_success_title_icon.png);
      }
      .weui_dialog_bd{
        padding:0;
        margin: 1rem auto 1rem auto;
        width: 682rem/50;
        height: 655rem/50;
        background-size: 682rem/50 682rem/50;
        background-image: url(../../images/answer_success_body_icon.png);
        span{
          position: absolute;
          top: 14rem;
          transform: translateX(-50%);
          left: 50%;
          color: #fff;
        }
      }
    }
  }
}